<template>
  <div>
    <button @click="handelClick">播放</button>
    <div class="box">
      这是文字
      <div class="zhezhao">

      </div>
    </div>
    <button @click="handelPlay" class="play">
      自定义播放
    </button>
    <u-input v-model="text"></u-input>

  </div>
</template>

<script setup lang="ts">
import yuyin from '@/static/video/text2audio.mp3'
import {ref} from "vue";
import {synthesize} from "@/utils/yuyin";
import {onLoad} from "@dcloudio/uni-app";
// const tts = uni.requireNativePlugin("nrb-tts-plugin")
onLoad(()=>{
  getBaiDuToken()
  // ttsInit()

})

const baiDuKey = {
  appid: "31101339",
  key: "bQzVxn3lvQxotG0bbR2mvo2G",
  secret: "p14P6mxIaVGGLmcAjqVVYjkPddql2nZa",
}
const getBaiDuToken = () => {
  uni.request({
    url: "https://aip.baidubce.com/oauth/2.0/token",
    method: "GET",
    data: {
      grant_type: "client_credentials",
      client_id: baiDuKey.key,
      client_secret: baiDuKey.secret,
    },
    success: (res) => {
      console.log("----获取baidu_token——success");
      // token.value = res.data.access_token
      uni.setStorageSync('baiduToken',res.data.access_token)
      console.log(res.data.access_token)
    },
    fail: () => {
    },
    complete: () => {
    },
  });
}
const ScanAudio = (url:any, count:any=1)=>{
    // 递归终止条件：当循环次数小于等于 0 时，停止递归
    if (count <= 0) return;

    // 创建内部音频上下文对象
    var music = uni.createInnerAudioContext();

    // 设置音频资源链接
    music.src = url;

    // 开始播放音频
    music.play();

    // 监听音频播放结束事件
    music.onEnded(() => {
        // 销毁音频上下文对象，以释放资源
        music.destroy();

        // 在音频播放结束后，延迟一定时间后重新调用 ScanAudio 函数进行循环播放
        setTimeout(() => {
            // 递减循环次数，继续下一次播放循环
            ScanAudio(url, count - 1);
        }, music.duration * 1000); // 延迟时间等于音频时长乘以 1000 毫秒
    });
}
const handelClick = () => {
  console.log('播放')
	ScanAudio(yuyin)
  // const audio = ref(null)
  // audio.value = new Audio()
  // audio.value.setAttribute("src", yuyin);
  // audio.value.play()
}
const text = ref('')
const handelPlay = async ()=>{
  console.log('自定义播放')
  console.log(text.value)
  synthesize(text.value)
  // synthesize('你好，大白')
  // ttsPlay()
}
// const ttsInit = ()=>{
//   console.log('初始化')
//   console.log(tts)
//   tts && tts.init({"lang":"ZH","country":"CN"},res=>{
//     console.log(res,'初始化')
//     if(res.success == 0){
//       console.log('初始化成功')
//     }
//   })
// }
// const ttsPlay = (utterance: SpeechSynthesisUtterance)=>{
//   tts && tts.speak('测试语音', {"pitch":2,"speechRate":2,"queueMode":1,"utteranceId":"V2iQORgDxLHLmusX"}, e => {
//     console.log(e)
//   })
// }
// const ttsStop = ()=>{
//   //停止语音
//   tts && tts.stop()
// }

</script>

<style scoped lang="scss">
.box{
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #000;
  text-align: center;
  line-height: 500px;
  font-size: 60px;
  font-weight: bold;
  position: relative;
  .zhezhao{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

  }
}
</style>
